<template>
  <div class="systemRootPage">
    <el-row>
      <!-- <el-col style="text-align: center;padding-right:10px" :sm="12">
        <el-input v-model.trim="username" placeholder="输入姓名" @keyup.enter.native="search"></el-input>
      </el-col>-->
      <el-col style="text-align: center;" :sm="24">
        <el-input v-model.trim="username" placeholder="输入账号或姓名" @keyup.enter.native="search">
          <el-button slot="append" @click="search">搜索</el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-row class="mod_title">
      <el-col :sm="4">
        <div class="g-title">账号数目（{{total}}个）</div>
      </el-col>
      <el-col :sm="20" style="text-align: right;">
        <el-button type="primary" @click="add" size="small">新增</el-button>
        <el-button type="warning" @click="edit" size="small">修改</el-button>
        <el-button type="danger" @click="delUser(0)" size="small">删除</el-button>
        <el-button type="info" size="small">关联账号</el-button>
        <el-button type="success" size="small" @click="editRole">分配角色</el-button>
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="listData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="loginname" label="登录账号" align="center"></el-table-column>
      <el-table-column prop="username" label="姓名" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="x" label="关联账号" align="center"></el-table-column>
      <el-table-column prop="zt" label="状态" align="center"></el-table-column>
      <el-table-column prop="registtime" label="创建时间" align="center" width="120"></el-table-column>
    </el-table>

    <el-row style="padding: 32px 16px;">
      <el-col>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageSize"
          :total="total"
          :current-page="pageNo"
          @current-change="fetchData"
          @size-change="pageSizeChange"
        ></el-pagination>
      </el-col>
    </el-row>
    <add :dialogVisible.sync="dialogAddVisible" @finish="fetchData()"></add>
    <edit :dialogVisible.sync="dialogEditVisible" :originData="opData" @finish="fetchData()"></edit>
    <editRole :dialogVisible.sync="roleDialogVisible" :originData="opData" @finish="fetchData()"></editRole>
  </div>
</template>
<script>
import {
  adminListjson,
  addAdmin,
  editAdmin,
  delUsers,
  checkName,
  startUsers
} from "@/api/admin";
import add from "./components/add";
import edit from "./components/edit";
import editRole from "./components/editRole";
import { mapGetters } from "vuex";
export default {
  components: { add, edit, editRole },
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["selectedComIds"])
  },
  watch: {
    //监听左侧单位勾选 重新获取数据
    selectedComIds() {
      this.pageNo = 1;
      this.fetchData();
    }
  },
  data: function() {
    return {
      tabIndex: "1",
      username: "",
      dialogAddVisible: false,
      dialogEditVisible: false,
      roleDialogVisible: false,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      opData: null, //当前操作的数据
      listData: [], //全部数据
      listDataSelected: [] //选中数据
    };
  },
  created() {
    //this.serverProjName = axios.defaults.baseURL;
    this.fetchData();
  },
  methods: {
    //编辑用户信息
    edit() {
      if (this.listDataSelected.length == 0) {
        this.$message("请选择");
        return;
      }
      this.opData = this.listDataSelected[0];
      this.dialogEditVisible = true;
    },
    //编辑用户角色信息
    editRole() {
      if (this.listDataSelected.length == 0) {
        this.$message("请选择");
        return;
      }
      this.opData = this.listDataSelected[0];
      this.roleDialogVisible = true;
    },
    //新增按钮事件
    add() {
      this.dialogAddVisible = true;
    },
    //搜索
    search() {
      this.pageNo = 1;
      this.fetchData();
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    async fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        username: this.username,
        comIds: this.selectedComIds.join(",")
      };
      let data = await adminListjson(params);
      this.listData = data.data;
      this.total = data.total;
      this.listDataSelected.splice(0);
    },
    //表格多选
    handleSelectionChange(val) {
      this.listDataSelected.splice(0);
      val.forEach(e => {
        this.listDataSelected.push(e);
      });
      console.log(this.listDataSelected);
    },
    //禁用启用
    delUser(status) {
      console.log(status);
      if (this.listDataSelected.length == 0) {
        this.$message("请选择");
        return;
      }
      this.$confirm("此操作将永久删除选中用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let userIds = this.listDataSelected
            .map(function(e) {
              return e.userid;
            })
            .join(",");
          let data = await delUsers({ uIds: userIds });
          if (data.error == 0) {
            this.$message.success("删除成功");
            this.fetchData();
          } else {
            this.$message.warning("操作失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.mod_box {
  padding: 20px;
}
.mod_title {
  padding: 20px 0;
  .g-title {
    height: 20px;
    padding-left: 8px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    border-left: 2px solid #f54e40;
    margin: 10px 0;
    display: inline-block;
  }
  .eluploadwrapper {
    display: inline-block;
    margin: 0 10px;
  }
}

.el-table th {
  background-color: #f5f7fa;
}

.el-dialog {
  -webkit-transform: none;
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
  background: #eef1f6;
  .el-dialog__body {
    background-color: #fff;
    margin: 0px 10px;
  }
}
</style>